<template>
	<view class="ph-24">
		<!-- 新、老用户专享 -->
		<view class="new mt-32" v-if="toMeun('商城-新老用户专区')==1">
			<view class="w-f b-24 content ph-8 pv-8" style="position: relative;">
				<image src="http://cwht.ricecs.cn/app/shop/newT.png"
					style="width: 100%;position: absolute;top:0;left: 0;" mode="widthFix" v-if="isNew"></image>
				<image src="http://cwht.ricecs.cn/app/shop/oldT.png"
					style="width: 100%;position: absolute;top:0;left: 0;" mode="widthFix" v-else></image>
				<view class="top h-92 f jc-s-b" style="padding-top: 88rpx;" @click="toUserExclusive">



				</view>
				<view class="pl-28">
					<u-scroll-list class="mt-32" :indicator="false">
						<view class="w-220 mr-12" v-for="(item, index) in zoneList" :key="index"
							@click="toDetail(item, 'shop')">
							<image :src="item.picUrl" class="w-220 h-124 picUrl" mode="aspectFill"></image>
							<view class="ph-12">
								<view class="mt-12 fs-26 fw-600 text-color4 text-ellipsis-1">{{ item.name }}</view>
								<view class="mt-4 fs-26 fw-600 text-color7"><text>优享价</text> ¥{{ item.price }}</view>
								<view class="mt-4 fs-20 text-color3 old-price">原价:{{item.originalPrice}}</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="h-44 bot mt-12"></view>
			</view>
		</view>
		<!-- 秒杀 -->
		<view class="hot w-f h-390 mt-32" v-if="toMeun('商城-秒杀')==1">
			<image
				:src="getBaseUrl() + '/admin-api/system/file/19/get/c5f74d40aa592ea9cb3130bc1dbe4614edde5daaed3d5c189fecb4d37ea32539.png'"
				class="w-f h-382"></image>
			<view class="content pt-28 pl-28">
				<view class="f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="http://cwht.ricecs.cn/app/shop/seckill.png" class="w-36 h-36 mr-12"></image>
						<view class="color fa-36 fw-600">限时秒杀</view>
					</view>
					<view class="f ai-c pr-33" @click="toSeckill">
						<view class="fs-24 color mr-9"> 更多秒杀</view>
						<u-icon name="arrow-right" size="10" color="#FF1414"></u-icon>
					</view>
				</view>
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in seckillList" :key="index" class="mt-20 pt-12 mr-12"
						@click="toseckillDetail(item)">
						<view class="w-220 line-box h-256">
							<view class="f ai-c seckill w-108 h-32 b-4 jc-c">
								<image src="http://cwht.ricecs.cn/app/shop/ms.png" class="w-22 h-22 mr-4"></image>
								<view class="fs-22 text-color5">秒杀中</view>
							</view>
							<image :src="item.picUrl.split(',')[0]" class="w-f h-124" mode="aspectFill"></image>
							<view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">{{ item.name }}</view>
							<view class="ph-12 mt-4 fs-26 fw-600 color">¥{{ item.seckillPrice }}</view>
							<!--                            <view class="ph-12 mt-4 fs-20 text-color3">月售{{ item.salesCount||0 }}</view>-->
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 双人成团 -->
		<view class="hot w-f h-390 mt-32" v-if="toMeun('商城-拼团')==1">
			<image
				:src="getBaseUrl() + '/admin-api/system/file/19/get/5f33beb00d81dffbe935171fdc99af94c2201ca09d81c288fc2886eb60efcbe4.png'"
				class="w-f h-382"></image>
			<view class="content pt-28 pl-28">
				<view class="f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="http://cwht.ricecs.cn/app/shop/teamwork-ico.png" class="w-35 h-35 mr-12"></image>
						<view class="teamwork-color fa-36 fw-600">双人成团</view>
					</view>
					<view class="f ai-c pr-33" @click="toTeamwork">
						<view class="fs-24 teamwork-color mr-9"> 更多拼团</view>
						<u-icon name="arrow-right" size="10" color="#FF7744"></u-icon>
					</view>
				</view>
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in teamworkList" :key="index" class="mt-20 pt-12 mr-12"
						@click="toTeamworkDetail(item)">
						<view class="w-220 line-box h-256">
							<view class="f ai-c teamwork w-108 h-32 b-4 jc-c">
								<image src="http://cwht.ricecs.cn/app/shop/teamwork-b.png" class="w-22 h-20 mr-4">
								</image>
								<view class="fs-22 text-color5">拼团中</view>
							</view>
							<image :src="item.picUrl.split(',')[0]" class="w-f h-124" mode="aspectFill"></image>
							<view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">{{ item.name }}</view>
							<view class="ph-12 mt-4 fs-26 fw-600 color">¥ {{ item.combinationPrice }}</view>
							<!--                            <view class="ph-12 mt-4 fs-20 text-color3">月售{{ item.salesCount||0 }}</view>-->
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 疯狂砍价 -->
		<view class="hot w-f h-390 mt-32" v-if="toMeun('商城-砍价')==1">
			<image
				:src="getBaseUrl() + '/admin-api/system/file/19/get/5f33beb00d81dffbe935171fdc99af94c2201ca09d81c288fc2886eb60efcbe4.png'"
				class="w-f h-382"></image>
			<view class="content pt-28 pl-28">
				<view class="f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="http://cwht.ricecs.cn/app/shop/bargain.png" class="w-36 h-36 mr-12"></image>
						<view class="bargain-color fa-36 fw-600">疯狂砍价</view>
					</view>
					<view class="f ai-c pr-33" @click="toBargain">
						<view class="fs-24 color mr-9"> 更多砍价</view>
						<u-icon name="arrow-right" size="10" color="#FF1414"></u-icon>
					</view>
				</view>
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in bargainList" :key="index" class="mt-20 pt-12 mr-12"
						@click="toBargainDetail(item)">
						<view class="w-220 line-box h-256">
							<view class="f ai-c seckill w-108 h-32 b-4 jc-c">
								<image src="http://cwht.ricecs.cn/app/shop/kan.png" class="w-22 h-20 mr-4"></image>
								<view class="fs-22 text-color5">砍价中</view>
							</view>
							<image :src="item.picUrl.split(',')[0]" class="w-f h-124" mode="aspectFill"></image>
							<view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">{{ item.name }}</view>
							<view class="ph-12 mt-4 fs-26 fw-600 color">¥ {{ item.bargainMinPrice }}</view>
							<view class="ph-12 mt-4 fs-20 text-color3">月售{{ item.salesCount||0 }}</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 本周热销 -->
		<!-- <view class="hot w-f h-390 mt-32">
            <image src="../http://cwht.ricecs.cn/app/shop/week-hot.png" class="w-f h-382"></image>
            <view class="content pt-28 pl-28">
                <view class="f ai-c jc-s-b">
                    <view class="f ai-c">
                        <image src="../http://cwht.ricecs.cn/app/shop/hot.png" class="w-35 h-35 mr-12"></image>
                        <view class="more fa-36 fw-600">本周热销</view>
                    </view>
                    <view class="f ai-c pr-33">
                        <view class="fs-24 more mr-9"> 更多商品</view>
                        <u-icon name="arrow-right" size="10" color="#FF6E00"></u-icon>
                    </view>
                </view>
                <u-scroll-list :indicator="false">
                    <view v-for="(item, index) in 5" :key="index" class="mt-20 pt-12 mr-12">
                        <view class="w-220 line-box h-256">
                            <image src="../../static/logo.png" class="w-f h-124"></image>
                            <view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">狗狗洗护洗护洗护洗护·SP</view>
                            <view class="ph-12 mt-4 fs-26 fw-600 color">¥ 80.00</view>
                            <view class="ph-12 mt-4 fs-20 text-color3">月售129</view>
                        </view>
                    </view>
                </u-scroll-list>
            </view>
        </view> -->

		<!-- 活体交易 -->
		<view class="hot w-f h-390 mt-32" v-if="toMeun('商城-活体交易')==1">
			<image
				:src="getBaseUrl() + '/admin-api/system/file/19/get/5f33beb00d81dffbe935171fdc99af94c2201ca09d81c288fc2886eb60efcbe4.png'"
				class="w-f h-382"></image>
			<view class="content pt-28 pl-28">
				<view class="f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="http://cwht.ricecs.cn/app/shop/livingBody.png" class="w-35 h-35 mr-12"></image>
						<view class="text-color4 fa-36 fw-600">活体交易</view>
					</view>
					<view class="f ai-c pr-33">
						<view class="fs-24 more mr-9"> 更多商品</view>
						<u-icon name="arrow-right" size="10" color="#FF6E00"></u-icon>
					</view>
				</view>
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in 5" :key="index" class="mt-20 pt-12 mr-12">
						<view class="w-220 line-box h-256">
							<image src="../../static/logo.png" class="w-f h-124"></image>
							<view class="fs-26 fw-600 text-color4 text-ellipsis-1 ph-12 mt-12">狗狗洗护洗护洗护洗护·SP</view>
							<view class="ph-12 mt-4 fs-26 fw-600 color">¥ 80.00</view>
							<view class="ph-12 mt-4 fs-20 text-color3">月售129</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { dictDataType } from '@/services/api/dict';
	import { getBaseUrl } from '@/utils/env';
	const isNew = ref(null);
	const zoneList = ref<any[]>([]);
	const seckillList = ref<any[]>([]);
	const teamworkList = ref<any[]>([]);
	const bargainList = ref<any[]>([]);
	const meunList = ref([]);
	getDict()

	function toMeun(name) {
		let isShow = 1
		for (var i in meunList.value) {
			if (name == meunList.value[i].label) {
				isShow = meunList.value[i].remark
			}
		}
		return isShow
	}
	async function getDict() {
		const res = await dictDataType({ type: 'user_model' })
		meunList.value = res.data
	}
	//砍价商品
	function toBargainDetail(data : any) {
		uni.navigateTo({
			url: `/pages_shop/bargainDetail/index?id=${data.id}`,
		});
	}
	//商品详情
	function toDetail(data : any) {
		uni.navigateTo({
			url: `/pages_shop/productDetails/index?id=${data.id}`,
		});
	}
	//秒杀详情
	function toseckillDetail(data : any) {
		uni.navigateTo({
			url: `/pages_shop/seckillDetail/index?id=${data.id}`,
		});
	}
	//拼团详情
	function toTeamworkDetail(data : any) {
		uni.navigateTo({
			url: `/pages_shop/teamworkDetail/index?id=${data.spuId}`,
		});
	}
	//新、老用户
	function getZoneList(data : any, isNewData : boolean) {
		zoneList.value = data;
		isNew.value = isNewData;
	}
	function toUserExclusive() {
		uni.navigateTo({
			url: `/pages_shop/userExclusive?isNew=${isNew.value}`,
		});
	}
	//秒杀
	function getSeckillList(data : any) {
		seckillList.value = data;
	}
	//拼团
	function getTeamworkList(data : any) {
		teamworkList.value = data;
	}
	//砍价
	function getBargainList(data : any) {
		bargainList.value = data;
	}
	const toSeckill = () => {
		uni.navigateTo({
			url: '/pages_shop/seckill',
		});
	};
	const toTeamwork = () => {
		uni.navigateTo({
			url: '/pages_shop/teamwork',
		});
	};
	const toBargain = () => {
		uni.navigateTo({
			url: '/pages_shop/bargain',
		});
	};
	defineExpose({ getZoneList, getSeckillList, getTeamworkList, getBargainList });
</script>
<style lang="scss" scoped>
	.picUrl {
		border-radius: 16rpx 16rpx 0 0;
	}

	.new {
		.content {
			background: #fff;

			.bot {
				background-image: linear-gradient(0deg, #faf3e6 0%, #ffffff 100%);
				border-radius: 0 0 18rpx 18rpx;
			}

			.top {
				background-image: linear-gradient(#faf3e6, #ffffff);
				border-radius: 18rpx 18rpx 0 0;
			}

			.old-price {
				text-decoration: line-through;
			}
		}
	}

	.hot {
		position: relative;

		.content {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;

			.line-box {
				background: #fff;
				border-radius: 12rpx;
				position: relative;

				image {
					border-radius: 12rpx 12rpx 0 0;
				}

				.seckill {
					background: #f54040;
					position: absolute;
					right: 8rpx;
					top: 7rpx;
				}

				.teamwork {
					position: absolute;
					right: 8rpx;
					top: 7rpx;
					background: #ff7744;
				}
			}
		}

		.color {
			color: #ff1414;
		}

		.more {
			color: #ff6e00;
		}

		.teamwork-color {
			color: #ff7744;
		}

		.bargain-color {
			color: #ff00ee;
		}
	}
</style>